<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../build/react.js" type="text/javascript" charset="utf-8"></script>
		<script src="../build/react-dom.js" type="text/javascript" charset="utf-8"></script>
		<script src="../build/browser.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../build/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="example">hello world</div>
		<script type="text/babel">
var UserGist = React.createClass({
  getInitialState: function() {
    return {
      name: '',
      father:"",
      age:0
    };
  },

  componentDidMount: function() {
    $.get(this.props.source, function(result) {
      var d =result;
      if (this.isMounted()) {
        this.setState({
          name:d.name,
          father: d.father,
          age:d.age
        });
      }
    }.bind(this));
  },

  render: function() {
    return (
      <div>
        my name is {this.state.name},I am {this.state.age} years old,my father is {this.state.father}.
      </div>
    );
  }
});
			ReactDOM.render(
			<article>
				<h1 style={{color:'orange'}}>Hello World!</h1>
				<UserGist source="../data/data1.json" />
			</article>, 
			document.getElementById("example")
			);
		</script>
	</body>

</html>